<template>
	<view class="AddCourier">
		<view class="courier f-background">
			<view class="courier-title">
				<text class="font-weight-600 color2 size-32">快捷下单</text>
			</view>
			<view class="upload font-weight-400 color-8 size-26">上传取件信息图片时，图片需清晰显示取件位置信息</view>
			<u-upload :fileList="fileList" @afterRead="afterRead" @delete="onDeletePicImg" name="6" multiple
				:maxCount="9">
				<image class="upload-img" src="@/static/img/jias.png" mode="" v-if="fileList.length"></image>
				<view class="upload-for" v-else>
					<view class="adds dis radius12">
						<text class="iconfont icon-jia1 size-44 color3"></text>
						<text class="font-weight-600 color3 size-32">点击上传取件图片</text>
					</view>
				</view>
			</u-upload>
		</view>
		<view v-if="params && params.length">
			<!-- 			<view class="courier-title border-bottom">
				<text class="font-weight-600 color2 size-32">取件码取件</text>
			</view> -->
			<view class="upload-for f-background courier" :class="{'margin-bottom-24':index != 0}"
				v-for="(item,index) in params" :key="index">
				<view class="stage">
					<!-- <view class="dis-cen"> -->
					<view class="box">
						<text class="iconfont icon-yizhanjijian color size-40"></text>
						<text class="font-weight-600 color2 size-32">{{item.siteName || ''}}</text>
						<text class="margin-left-12">{{item.siteAddressDetails || ''}}</text>
					</view>
					<!-- </view> -->
					<view class="color-8">
						<text class="size-24">服务时间：</text>
						<text class="size-26">
							{{item.startTime || '00:00'}}-{{item.endTime || '00:00'}}
						</text>
					</view>
				</view>
				<view class="codes">
					<view class="codes-cen dis-cen" v-for="(items,inx) in item.list" :key="index">
						<view class="codes-ali">
							<view class="codes-title dis-ali">取件码{{inx+1}}</view>
							<input class="codes-input" v-model="item.list[inx].pkgNumber" type="text"
								placeholder="请输入取件码" />
						</view>
						<view class="codes-icon" @click="onDeletePic(index,inx)">
							<image class="width-height100" src="@/static/icons/shan.png" mode=""></image>
						</view>
					</view>
					<view class="adds dis radius12" @click="onAddPickupCode(index)">
						<text class="iconfont icon-jia1 size-44 color3"></text>
						<text class="font-weight-600 color3 size-32">添加取件码</text>
					</view>
				</view>
			</view>
		</view>
		<view class="inset-bottom"></view>
		<view class="button f5-background">
			<u-button type="primary" :throttleTime="throttleTime"
				:customStyle="{width: '100%',height: '100rpx',borderRadius: '100rpx',margin: '0 auto'}"
				color="linear-gradient( 90deg, #EB0000 0%, #FF2222 100%, #EB0000 100%)" @click="onSubmit">
				<text class="color-f font-weight-600 size-34">确定</text>
			</u-button>
			<view class="inset-bottom"></view>
		</view>
	</view>
</template>

<script>
	import { GetSiteList } from "@/api/index"
	import { MultipassUpload } from '@/utils/index';
	export default {
		data() {
			return {
				fileList: [],
				params: [],
				communityId: 0
			}
		},
		onLoad() {
			this.communityId = uni.getStorageSync('addsData').communityId
			this.postGetSiteList()
		},
		methods: {
			async postGetSiteList() {
				const { data, code } = await GetSiteList({ communityId: this.communityId })
				if (code == '200') {
					console.log(data)
					data.map(res => {
						console.log('resresresresresres', res)
						const datas = {
							siteId: res.id,
							siteName: res.siteName,
							siteAddress: res.siteAddress,
							siteAddressDetails: res.siteAddressDetails,
							startTime: res.startTime,
							endTime: res.endTime,
							list: []
						}
						this.params.push(datas)
					})
					console.log('this.paramsthis.paramsthis.params', this.params)
					this.processing()
				}
			},
			async afterRead(e) {
				const url = await MultipassUpload(e.file, 3, this.fileList)
				this.fileList = url
			},
			// 数据回显
			processing() {
				const datas = uni.getStorageSync('paramsList')
				if (!datas) return
				let imgList = []
				this.params.map(res => {
					datas.map(item => {
						if (item.siteId == 0) {
							imgList = item.list[0].pkgNumber.split(',')
							// this.fileList.push({})
						}
						if (res.siteId == item.siteId) return res.list = item.list
					})
				})
				console.log('this.paramsthis.paramsthis.params', this.params)
				imgList.map(rex => {
					this.fileList.push({ url: rex })
				})
			},
			// 点击确定
			onSubmit() {
				let paramsList = []
				this.params.map((res, index) => {
					if (res.list.length) {
						// let paramsListEr = []
						res.list.map((item, inx) => {
							if (item.pkgNumber) return item.siteId = res.siteId
						})
						paramsList.push({
							siteId: res.siteId,
							siteName: res.siteName,
							list: res.list,
						})
					}
				})
				console.log(this.params, paramsList)
				// 图片
				if (this.fileList.length) {
					let fileImg = []
					this.fileList.map(res => {
						fileImg.push(res.url)
					})
					let datasImg = [{
						siteId: 0,
						siteName: '取件图片',
						pickUpPkgType: 3,
						list: [{
							siteId: this.communityId,
							pkgNumber: fileImg.join(','),
							pickUpPkgType: 3
						}]
					}]
					paramsList = [...datasImg, ...paramsList]
				}
				uni.setStorageSync('paramsList', paramsList);
				uni.navigateBack({})
			},
			// 删除图片
			onDeletePicImg({ index }) {
				console.log('index', index)
				this.fileList.splice(index, 1)
			},
			// 删除
			onDeletePic(index, inx) {
				console.log('index', index)
				this.params[index].list.splice(inx, 1)
			},
			// 点击添加取件码
			onAddPickupCode(index) {
				this.params[index].list.push({ pkgNumber: '', pickUpPkgType: 1 });
			}
		}
	}
</script>

<style lang="scss">
	.AddCourier {
		padding: 20rpx 20rpx 184rpx;

		.button {
			position: fixed;
			width: 100%;
			bottom: 0;
			left: 0;
			z-index: 1000;
			padding: 30rpx;
			box-sizing: border-box;
		}

		.courier {
			border-radius: 18rpx;
			padding: 30rpx;
			margin-bottom: 24rpx;

			// .courier-title {
			// 	padding: 32rpx 24rpx 32rpx 0;
			// }

			.upload {
				padding: 28rpx 0 42rpx;
			}

			.upload-for {
				margin-right: 24rpx;
				padding-bottom: 30rpx;
				width: 662rpx;
			}

			.adds {
				width: 100%;
				height: 90rpx;
				background: rgba(85, 85, 85, 0.08);
			}

			.stage {
				padding: 0 0 30rpx;
				display: grid;
				grid-gap: 14rpx;

				.icon-shizhong1 {
					margin-right: 6rpx;
				}
			}

			.stage-adds {
				padding-left: 56rpx;
			}

			.icon-yizhanjijian {
				margin-right: 10rpx;
				width: 46rpx;
				height: 46rpx;
				display: inline-block;
			}

			.icon-jia1 {
				margin-right: 10rpx;
			}

			.codes {
				display: grid;
				grid-gap: 20rpx;

				.codes-ali {
					background: rgba(153, 153, 153, 0.08);
					border-radius: 12rpx;
					display: grid;
					width: 520rpx;
					grid-template-columns: 164rpx 1fr;
				}

				.codes-input {
					height: 90rpx;
				}

				.codes-title {
					padding-left: 30rpx;
					box-sizing: border-box;
				}

				.codes-icon {
					width: 104rpx;
					height: 70rpx;
					padding: 16rpx 33rpx;
					box-sizing: border-box;
					border-radius: 12rpx;
					background: rgba(153, 153, 153, 0.08);
				}
			}
		}

		// 上传
		.upload-img {
			width: 144rpx;
			height: 144rpx;
			border-radius: 18rpx;
			margin-bottom: 48rpx;
		}
	}
</style>